<template>
  <el-main>

    <div>
      <el-button
          type="text"
          @click="topdf(0)">  导出PDF  |</el-button>
      <el-button
          type="text"
          @click="topdf(1)">  预览  |</el-button>
      <el-button
          type="text"
          @click="topdf(0)">  下载  |</el-button>
      <el-button
          v-if="this.role"
          type="text"
          @click="add">   发布酒店</el-button>
    </div>

    <template>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="序号">
        </el-table-column>
        <el-table-column
            prop="name"
            label="酒店名称">
        </el-table-column>
        <el-table-column
            prop="level"
            label="星级">
          <template slot-scope="scope">
            {{scope.row.level =='jinji'?'经济型':scope.row.level =='shangwu'?'商务型':scope.row.level=='linshi'?'临时型':''}}
          </template>
        </el-table-column>
        <el-table-column
            prop="brand"
            label="品牌">
          <template slot-scope="scope">
            {{scope.row.brand =='rujia'?'如家':scope.row.brand =='qixing'?'七星':scope.row.brand=='yiye'?'一夜':''}}
          </template>
        </el-table-column>
        <el-table-column
            prop="minprice"
            label="最低价格">
        </el-table-column>
        <el-table-column
            prop="maxprice"
            label="最高价格">
        </el-table-column>
        <el-table-column
            prop="vdo"
            label="经纬度">
        </el-table-column>
        <el-table-column
            prop="dbed"
            label="大床(房间数)">
        </el-table-column>
        <el-table-column
            prop="zbed"
            label="中床(房间数)">
        </el-table-column>
        <el-table-column
            prop="xbed"
            label="小床(房间数)">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">添加客房</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">预约</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryData.pageNum"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="this.queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.queryData.total">
    </el-pagination>
  </el-main>
</template>

<script>
export default {
  data() {
      return{
          queryData:{
            pageNum:1,
            pageSize:3,
            total:0
        },
        tableData:[],
        role:false
      }
  },
  methods:{
    //pdf
    topdf(val) {
      if (val != 1) {
        window.open(this.$baseUrl + "/hotel/topdf1");
      } else {
        window.open(this.$baseUrl + "/hotel/topdf2");
      }

    },
    //发布酒店
    add() {
        this.$router.push("/addhotel");
    },
    //添加房客
    handleEdit(index, row) {
      this.$router.push("/addtenant/"+JSON.stringify(row))
    },
    //预约
    handleDelete(index, row) {
      console.log(index, row);
      this.$router.push("/yuyue/"+JSON.stringify(row))
    },
    //分页
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`);
      this.queryData.pageSize = pageSize ;
      this.queryData.pageNum = 1;
      this.list();
    },
    handleCurrentChange(pageNum) {
      console.log(`当前页: ${pageNum}`);
      this.queryData.pageNum = pageNum;
      this.list();
    },
    list() {
      this.axios.get(this.$baseUrl+"/hotel/list",{params:{'pageNum':this.queryData.pageNum,'pageSize':this.queryData.pageSize}}).then(res=>{
        console.log("列表数据:",res);
        this.tableData = res.data.data.list;
        this.queryData.pageNum = res.data.data.pageNum;
        this.queryData.pageSize = res.data.data.pageSize;
        this.queryData.total = res.data.data.total;
      })
    }
  },
  created() {
    this.list();
    let userinfo = localStorage.getItem("userinfo");
    let parse = JSON.parse(userinfo);
    if (parse.role == 0) {
      this.role = true;
    }
  }
}
</script>

<style scoped>

</style>